<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇思妙想后台管理系统</title>
    <link rel="stylesheet" href="./lib/css/style.css">
</head>

<body>
    <header class="header">
        <h2 class="title">奇思妙想后台管理系统</h2>
    </header>
    <div class="boxwarrp">
        <section class="contentwarrp">
            <header class="content-header">
                <ul class="header-addess myclear">
                    <li><a href="#">当前位置：首页</a></li>
                    <li>></li>
                    <li><a href="#">信息管理</a></li>
                    <li>></li>
                    <li><a href="#">人员信息</a></li>
                    <li><a href="#">欢迎您的到来：</a></li>
                    <li><a href="#" id="name" style="color: red;"></a></li>
                    <li><a href="./login.html" style="border: 1px solid rgb(26, 28, 146); padding: 2px;">登录</a></li>
                    <li><a id="out" href="#" style="border: 1px solid rgb(26, 28, 146); padding: 2px;">退出</a></li>
                </ul>
                <input id="J_search" class="header-search" placeholder="工号/姓名/电话 按回车搜索"></input>
                <a id="J_add" class="header-add">添加</a>
                <!-- 分页按钮 -->
                <ul class="page-box">
                    <li id="J_prev" class="page-prev">«</li>
                    <li id="J_page" class="page-num">1/1</li>
                    <li id="J_next" class="page-next">»</li>
                </ul>
            </header>

            <!-- 数据展示页面 -->
            <section class="content-box">
                <div class="box-title">
                    <ul class="box-list myclear">
                        <li class="list-id list-li">工号</li>
                        <li class="list-name list-li">姓名</li>
                        <li class="list-sex list-li">性别</li>
                        <li class="list-age list-li">年龄</li>
                        <li class="list-birth list-li">生日</li>
                        <li class="list-phone list-li">电话</li>
                        <li class="list-address list-li">籍贯</li>
                        <li class="list-descript list-li">描述</li>
                        <li class="list-delete list-li">操作</li>
                    </ul>
                </div>
                <div id="J_Data" class="box-content"></div>
            </section>

            <!-- 弹出模态框 -->
            <div id="J_model" class="model-box">
                <div class="model-centent">
                    <h2 class="model-title"><span id="J_title">员工信息</span><span id="J_cancel">×</span></h2>
                    <hr>
                    <p class="model-id">
                        工号：<input type="text" disabled>
                    </p>
                    <p class="model-name">
                        姓名*：<input type="text" placeholder="请输入姓名">
                        <span></span>
                    </p>
                    <p class="model-sex">
                        性别：
                        <input type="radio" checked name="sex" id="nan" value="男"><label for="nan">男</label>
                        <input type="radio" name="sex" id="nv" value="女"><label for="nv">女</label>
                    </p>
                    <p class="model-age">
                        年龄*：<input type="text" disabled>
                    </p>
                    <p id="J_date" class="model-birth">
                        出生*：
                        <select id="J_year"></select>
                        年
                        <select id="J_month">
                            <option selected value="">--请选择--</option>
                        </select>
                        月
                        <select id="J_day">
                            <option selected value="">--请选择--</option>
                        </select>
                        日
                    </p>
                    <p class="model-phone">
                        手机号*：<input type="tel" placeholder="请输入手机号">
                        <span></span>
                    </p>
                    <p id="J_city" class="model-address">
                        住址：
                        <select id="J_province">
                        </select>
                        <select id="J_town">
                            <option selected>--请选择--</option>
                        </select>
                        <select id="J_disrict">
                            <option selected>--请选择--</option>
                        </select>
                    </p>
                    <p class="model-descript">
                        描述：<textarea cols="42" rows="8"></textarea>
                    </p>
                    <p class="model-btn">
                        <a href="#">重置</a>
                        <a href="#">提交</a>
                    </p>
                </div>
            </div>
        </section>
    </div>
    <!-- jQuery包 -->
    <script src="./lib/js/jquery-1.12.4.js"></script>
    <!-- 三级联动包 -->
    <script src="./lib/js/dataCity.js"></script>

    <!-- HTML模板模板引擎js -->
    <script src="./lib/js/template-web.js"></script>

    <!-- 制作模板 -->
    <script id='tpl' type="text/html">
        {{each list}}
        <ul class="box-list myclear">
            <li class="list-id list-li" data-id='{{$value._id}}'>{{$value.userId}}</li>
            <li class="list-name list-li">{{$value.userName}}</li>
            <li class="list-sex list-li">{{$value.userSex}}</li>
            <li class="list-age list-li">{{$value.userAge}}</li>
            <li class="list-birth list-li">{{$value.userBirth}}</li>
            <li class="list-phone list-li">{{$value.userPhone}}</li>
            <li class="list-address list-li">{{$value.userAddress}}</li>
            <li class="list-descript list-li">{{$value.userDescript}}</li>
            <li class="list-delete list-li"><span class="update-span">修改</span><span class="delete-span">删除</span></li>
        </ul>
        {{/each}}
    </script>

    <script src="./lib/js/index.js"></script>

</body>

</html>